import { useMemo, useState } from 'react'
import { TabBar } from 'antd-mobile'
import style from './index.module.less'
import { UserOutline, UnorderedListOutline, AppstoreOutline, MessageOutline } from 'antd-mobile-icons'
import CaseList from './pages/caseList'
import ChartList from './pages/chartList'
import Mine from './pages/mine'
import classNames from 'classnames'
import uuid from 'uuid'
import { useAppDispatch, useAppSelector } from '@src/redux/hook'
import { setList } from '@src/redux/reducers/pages'

const tabs = [
  { title: '案件', icon: <UnorderedListOutline />, component: CaseList, id: uuid()},
  { title: '即时通讯', icon: <MessageOutline />, component: ChartList, id: uuid()},
  { title: '我的', icon: <UserOutline />, component: Mine, id: uuid() },
]

function Main () {
  const [activeKey, setActiveKey] = useState(tabs[0].id)
  const dispatch = useAppDispatch()
  const list = useAppSelector(state => state.chart.list)
  const count = useMemo(() => {
    let n = 0
    list.forEach(li => { n += li.c })
    return n
  }, [list])
  return (
    <div className={style.container}>
      <div className={style.body}>
        <div className={style.inner}>
          {tabs.map((item) => {
            const Component = item.component
            return (
              <div key={item.id} className={classNames(style.page, {[style.active]: activeKey === item.id})}>
                <Component />
              </div>
            )
          })}
        </div>
      </div>
      <div className={style.nav}>
        <TabBar activeKey={activeKey} onChange={e => setActiveKey(e)}>
          <TabBar.Item key={'home'} title={'首页'} icon={<AppstoreOutline />} onClick={() => {
            dispatch(setList([{ element: 'home', title: '首页', id: uuid() }]))
          }} />
          {
            tabs.map((item) => {
              return (
                <TabBar.Item
                  key={item.id}
                  title={item.title}
                  icon={item.icon}
                  badge={item.title === '即时通讯' ? (count || undefined) : undefined}
                >
                </TabBar.Item>
              )
            })
          }
        </TabBar>
      </div>
    </div>
  )
}

export default Main
